<template>
    <page-container>
        <cu-custom slot="header" :isBack="true" bgColor="bg-white">
            <block slot="content">支付密码</block>
        </cu-custom>
        <view slot="center" class="pwd">
            <block v-if="showYzm==true">
                <view class="pwdtext">点击获取验证码发送至<text class="numberd">{{newIphone}}</text>请在下方</view>
                <view class="pwdtext">输入<text class="numberd">4</text>位数验证码</view>
                <view style="margin-top: 60rpx;">
                    <vcode-input ref="VcodeInput" @vcodeInput="vcodeInput"></vcode-input>
                </view>
                <view class="yzmhq" @click="getCode" v-if="hqyzm==false">获取验证码</view>
                <view class="yzmhqt" v-if="hqyzm==true">{{tiemNum}}s后可重新获取</view>
                <view class="tiptext">输入短信验证码</view>
                <view class="btnfr" @click="toshowYzm">确认</view>
                <!-- <view class="btnfrTw" v-show="valOne==''">确认</view> -->
            </block>

            <block v-if="showZfm==true">
                <view class="pwdtext">请输入6位支付密码，建议不要使用重复</view>
                <view class="pwdtext">或连续的数字</view>
                <view style="margin-top: 60rpx;">
                    <vcode-input ref="VcodeInputTwo" @vcodeInput="vcodeInputTwo" :sum='6' :isPassword="true"></vcode-input>
                </view>
                <view class="tiptext">请设置支付密码</view>
                <view class="btnfr" @click="toshowZfm">确认</view>
                <!-- <view class="btnfrTw" v-show='buttonclickTwo==false'>确认</view> -->
            </block>

            <block v-if="showZfmTwo==true">
                <view class="pwdtext">请输入6位支付密码，建议不要使用重复</view>
                <view class="pwdtext">或连续的数字</view>
                <view style="margin-top: 60rpx;">
                    <vcode-input ref="VcodeInputThree" @vcodeInput="vcodeInputThree" :sum='6' :isPassword="true"></vcode-input>
                </view>
                <view class="tiptext">请再次输入</view>
                <view class="btnfr" @click="toshowZfmTwo">确认</view>
                <!-- <view class="btnfrTw" v-show='buttonclickThree==false'>确认</view> -->
            </block>

        </view>
    </page-container>
</template>

<script>
import VcodeInput from '@/chatPages/components/vcode-input/vcode-input.vue'
export default {
	data() {
		return {
			showYzm: false,
			showZfm: false,
			showZfmTwo: false,
			buttonclick: false,
			buttonclickTwo: false,
			buttonclickThree: false,
			hqyzm: false,
			tiemNum: 120,
			tiemConten: null,
			newIphone: 0,
			valOne: '',
			valTwo: '',
			valThree: ''
		}
	},
	components: {
		VcodeInput
	},
	created() {

	},
	onShow() {
		this.showYzm = true
		this.getMobileInfo()
	},
	methods: {
		getMobileInfo() {
			this.$request.memberInfo().then(res => {
				this.getcodenumber = res.data.mobile
				this.newIphone = res.data.mobile.substr(0, 3) + '****' + res.data.mobile.substr(7, 11)
			})

		},
		toshowYzm() {
			if (this.valOne == '') {
				this.$util.tip('输入验证码')
				return
			}
			this.$request.memberVerifypaypwdcode({
				code: this.valOne,
				key: this.key
			}).then(res => {
				// console.log(res)
				this.showYzm = false
				this.showZfm = true
				this.clearValue()
			})
		},
		toshowZfm() {
			this.showZfm = false
			this.showZfmTwo = true
			this.clearValueTwo()
		},
		toshowZfmTwo() {
			if (this.valTwo != this.valThree) {
				this.$Utils.tip('密码不正确')
				return
			}

			this.$request.memberModifypaypassword({
				key: this.key,
				code: this.valOne,
				password: this.valThree
			}).then(res => {
				this.showZfmTwo = false
				this.$Utils.tip('设置成功')
				setTimeout(() => {
					// uni.reLaunch({
					// 	url:'/publicPages/setup/setting'
					// })
					this.$util.back()
				}, 800)
			})
		},
		getCode() {
			let newIphone = this.getcodenumber
			if (newIphone != '') {
				this.hqyzm = true
				this.$request.memberPaypwdcode().then(res => {
					// console.log("api/member/paypwdcode",res.key)
					this.key = res.data.key
					this.tiemConten = setInterval(() => {
						this.tiemNum--
						if (this.tiemNum === 0) {
							clearInterval(this.tiemConten)
							this.tiemNum = 120
							this.hqyzm = false
						}
					}, 1000)
				})
			} else {
				this.$util.tip('请先绑定手机号')
			}
		},
		// 用户输入的值
		vcodeInput(val) {
			this.valOne = val
		},
		vcodeInputTwo(val) {
			this.valTwo = val
		},
		vcodeInputThree(val) {
			this.valThree = val
		},
		// 控制组件获取焦点
		setFocus() {
			this.$refs.VcodeInput.setFocus()
		},
		// 控制组件失去焦点
		setBlur() {
			this.$refs.VcodeInput.setBlur()
		},
		// 清除已输入
		clearValue() {
			this.$refs.VcodeInput.clearValue()
		},
		// 控制组件获取焦点
		setFocusTwo() {
			this.$refs.VcodeInputTwo.setFocus()
		},
		// 控制组件失去焦点
		setBlurTwo() {
			this.$refs.VcodeInputTwo.setBlur()
		},
		// 清除已输入
		clearValueTwo() {
			this.$refs.VcodeInputTwo.clearValue()
		},
		// 控制组件获取焦点
		setFocusThree() {
			this.$refs.VcodeInputThree.setFocus()
		},
		// 控制组件失去焦点
		setBlurThree() {
			this.$refs.VcodeInputThree.setBlur()
		},
		// 清除已输入
		clearValueThree() {
			this.$refs.VcodeInputThree.clearValue()
		}

	},
	mounted() { }
}
</script>

<style lang="scss" scoped>
.pwd {
    padding-top: 107rpx;
}

.pwdtext {
    font-size: 28rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #999999;
    text-align: center;
    padding-bottom: 20rpx;
}

.numberd {
    font-size: 28rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #000000;
    text-align: center;
}

.yzmhq {
    font-size: 22rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #fd3b5c;
    padding-left: 148rpx;
    margin-top: 40rpx;
}

.tiptext {
    padding-top: 113rpx;
    font-size: 28rpx;
    font-family: PingFang SC;
    font-weight: bold;
    color: #222222;
    padding-bottom: 50rpx;
    text-align: center;
}

.btnfr {
    width: 540rpx;
    height: 88rpx;
    background: linear-gradient(90deg, #ff7044, #fd3b5c);
    border-radius: 44rpx;
    text-align: center;
    font-size: 32rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #ffffff;
    line-height: 88rpx;
    margin: 0 auto;
}

.yzmhqt {
    font-size: 22rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #999999;
    padding-left: 148rpx;
    padding-top: 30rpx;
}

.btnfrTw {
    width: 540rpx;
    height: 88rpx;
    background: #cccccc;
    border-radius: 44rpx;
    text-align: center;
    font-size: 32rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #ffffff;
    line-height: 88rpx;
    margin: 0 auto;
}
</style>
